<template>
  <div>
    <Form ref="form">
      <Field v-model="params.freezeTime"
        label="冻结时间" placeholder="请输入冻结时间"
        type="digit">
        <template #right-icon>
          单位：<Tag type="primary">小时</Tag>
        </template>
      </Field>
    </Form>
    <div
      class="footer van-hairline--top van-dialog__footer">
      <Button @click="props.hide" size="large"
        class=" van-dialog__cancel">取消</Button>
      <Button size="large" :loading="loading"
        class="van-dialog__confirm van-hairline--left"
        @click="handleSubmit()">确定</Button>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  Button, Field, Form, type FormInstance,
  showFailToast,
  Tag,
} from 'vant';
import { onMounted, type PropType, ref } from 'vue';

import { settingFreezeTime } from '../api';
import UserItem, { UserFreezeConfig } from '../models/UserItem';

const form = ref<FormInstance>({} as FormInstance);
const loading = ref(false);
const params = ref<UserFreezeConfig>(new UserFreezeConfig());
const props = defineProps({
  scope: {
    type: Object as PropType<{
      record: UserItem
      reload?: () => Promise<void>
    }>,
    default: () => ({}),
  },
  hide: {
    type: Function as PropType<() => void>,
    default: () => { },
  },
});

onMounted(() => {
  if (props.scope.record.userId) {
    params.value.userId = props.scope.record.userId;
    params.value.freezeTime = props.scope.record.freezeTime;
  } else {
    props.hide();
    showFailToast('用户ID不存在');
  }
});

const handleFreeze = async () => {
  try {
    loading.value = true;
    await settingFreezeTime(params.value);
  } catch (error) {
    //
  } finally {
    loading.value = false;
  }
};

const handleSubmit = async () => {
  await handleFreeze();
  if (props.scope.reload) {
    await props.scope.reload();
  }
  props.hide();
};
</script>
<style lang="less" scoped>
.footer {
  background-color: #fff;
}
</style>
